<template>
  <el-card>
    <div slot="header" class="clearfix">
      <my-bread>商圈</my-bread>
    </div>
    <!-- tab切换部分 -->
    <el-radio-group v-model="TabType">
      <el-radio-button v-for="item in tabes" :label="item.type" :key="item.type">{{item.title}}</el-radio-button>
    </el-radio-group>

    <!-- 新增商圈 -->
    <div class="clearfix">
      <el-button class="fr" type="primary" @click="handleClick">新增商圈</el-button>
    </div>

    <div v-loading="loading">
      <type-a-table v-if="TabType===1" :tableData="tableData" @handleEdit="handleEdit"></type-a-table>
      <type-b-table v-if="TabType===2" :tableData="tableData" @handleEdit="handleEdit"></type-b-table>

      <!-- 分页器 -->
      <!-- <my-pagination :pagination="pagination" @pageChange="pageChange"></my-pagination> -->
    </div>

    <!-- 12/10 s-- -->
    <div class="baiduMap">
      <baidu-map></baidu-map>
    </div>

    <!-- 对话框 -->
    <el-dialog title="创建商圈" :visible.sync="dialogVisible" width="50%" append-to-body>

      <!-- 编辑页 -->
      <type-a-dialog style='width:80%;margin:0 auto;'></type-a-dialog>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </el-card>
</template>

<script>
import TypeATable from './Components/TypeATable'
import TypeADialog from './Components/TypeADialog'
import TypeBTable from './Components/TypeBTable'
// import {
//   shopIdentApplyList,
//   shopIdentList
//   // shopIdentApplyAudit
// } from '@/api/businessAttest-api.js'
// 12/10 S-----
import BaiduMap from './Components/BaiduMap'
export default {
  components: {
    TypeBTable,
    TypeADialog,
    TypeATable,
    BaiduMap
  },
  data () {
    return {
      tabes: [
        { title: '商圈管理', type: 1, teble: 'ShopIdentApplyList' },
        { title: '商圈分类管理', type: 2, teble: 'ShopIdentList' }
      ],
      TabType: 1,
      screeningForm: {
        keyName1: '',
        keyName2: ''
      },
      loading: false,
      dialogVisible: false,

      tableData1: [],
      tableData2: [],
      pagination1: {
        size: 10,
        page: 1,
        total: 0
      },
      pagination2: {
        size: 10,
        page: 1,
        total: 0
      }
    }
  },

  watch: {
    TabType: {
      immediate: true,
      handler: function (val) {
        // const name = this.tabes[val - 1].teble
        // this['get' + name]()
      }
    }
  },

  computed: {
    tableData () {
      return this['tableData' + this.TabType]
    },
    pagination () {
      return this['pagination' + this.TabType]
    }
  },

  created () {},
  methods: {
    // 获取
    // getShopIdentApplyList () {
    //   this.loading = true
    //   shopIdentApplyList({
    //     ...this.pagination1,
    //     name: this.screeningForm.keyName1
    //   }).then(res => {
    //     if (res.success) {
    //       this.pagination1 = {
    //         ...this.pagination1,
    //         page: res.data.currentPage,
    //         total: res.data.total
    //       }
    //       this.tableData1 = res.data.data
    //     } else {
    //       this.$msg2.elseMsg(res)
    //     }
    //     this.loading = false
    //   })
    // },

    // // 获取2
    // getShopIdentList () {
    //   this.loading = true
    //   shopIdentList({
    //     ...this.pagination2,
    //     name: this.screeningForm.keyName2
    //   }).then(res => {
    //     if (res.success) {
    //       this.pagination2 = {
    //         ...this.pagination2,
    //         page: res.data.currentPage,
    //         total: res.data.total
    //       }
    //       this.tableData2 = res.data.data
    //     } else {
    //       this.$msg2.elseMsg(res)
    //     }
    //     this.loading = false
    //   })
    // },

    // // 筛选/重置筛选
    // screening (Bool) {
    //   if (!this.screeningForm['keyName' + this.TabType]) return
    //   if (!Bool) {
    //     this.screeningForm['keyName' + this.TabType] = ''
    //     this['pagination' + this.TabType] = 1
    //   }
    //   const name = this.tabes[this.TabType - 1].teble
    //   // this['isGet' + name] = true
    //   this['get' + name]()
    // },

    // 删除/详情/编辑
    handleEdit (row, type) {
      switch (type) {
        case 'del':
          console.log(row.id, type)
          break

        case 'xq':
          console.log(row.id, type)

          break

        case 'bj':
          console.log(row.id, type)

          break
      }
      // this.$msg2
      //   .msg3(bool ? '是否认证通过, 是否继续?' : '是否认证拒绝, 是否继续?')
      //   .then(() => {
      //     const { id, status } = row
      //     shopIdentApplyAudit({
      //       id,
      //       status: bool && status === 0 ? 1 : 2
      //     }).then(res => {
      //       if (res.success) {
      //         this.$msg2.success(bool ? '认证通过' : '认证拒绝')
      //         this['pagination' + this.TabType] = {
      //           ...this['pagination' + this.TabType],
      //           page: 1
      //         }
      //         const name = this.tabes[this.TabType - 1].teble
      //         // this['isGet' + name] = true
      //         this['get' + name]()
      //       }
      //     })
      //   })
      //   .catch(() => {})
    },

    // 分页器
    pageChange (page) {
      this['pagination' + this.TabType] = {
        ...this['pagination' + this.TabType],
        page: page
      }
      const name = this.tabes[this.TabType - 1].teble
      this['get' + name]()
    },

    // 新增
    handleClick () {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.screening {
  padding: 27px 24px;
  background: rgba(250, 250, 250, 1);
}
</style>
